<template>
  <div>
    <img class="assets-item" :src="fileIcon">
    <span class="assets-name">{{ title }}</span>
  </div>
</template>
<script setup name="Assets-Name">
import dirPng from "@/assets/images/file/dir.png"
import videoPng from "@/assets/images/file/file_video.png"
import unknownPng from "@/assets/images/file/file_unknown.png"
import imgPng from "@/assets/images/file/file_img.png"
import pdfPng from "@/assets/images/file/file_pdf.png"
import excelPng from "@/assets/images/file/file_excel.svg"
import wordPng from "@/assets/images/file/file_word.svg"
import pptPng from "@/assets/images/file/file_ppt.svg"
import audioPng from "@/assets/images/file/file_mp3.png"
import txtPng from "@/assets/images/file/file_txt.png"
const {proxy} = getCurrentInstance();
const props = defineProps({
  ext: String,
  title: String,
  objectType: String
});
const ext2IconMap = {
  "folder": dirPng,
  "mp4": videoPng,
  "jpg": imgPng,
  "audio": audioPng,
  "pdf": pdfPng,
  "docx": wordPng,
  "doc": wordPng,
  "xlsx": excelPng,
  "xls": excelPng,
  "ppt": pptPng,
  "pptx": pptPng,
  "txt": txtPng,
  "unknown": unknownPng
}
const fileIcon = computed(() => {
  if (props.objectType === 'folder') {
    return ext2IconMap['folder']
  }
  if (ext2IconMap[props.ext]){
    return ext2IconMap[props.ext]
  }
  return ext2IconMap['unknown']
});
</script>
<style lang="scss" scoped>
.assets-item{
  width:24px;
  vertical-align: bottom;
}
.assets-name{
  margin-left:5px;
}
</style>
